<template>
  <div class="common-layout" id='imgtxtrpt'>
    <el-main>
      <el-row>
        <el-col :span="24" style='text-align: center;padding-left: 10px'>
          <el-row>
            <el-col :span="22">
              <el-form-item label="标本名称：">
                <el-input v-model="formData.field1"></el-input>

              </el-form-item>
            </el-col>
            <el-col :span="2">
              <vxe-button type="text" class="button-blue" content="查看模板" @click="showDiagnosTempDrawer"></vxe-button>
            </el-col>
            <el-col :span="24">
              <el-form-item label="临床诊断：">
                <el-popover placement='bottom' :width="400" trigger="click">
                  <template #reference>
                    <el-input v-model="formData.field2"></el-input>
                  </template>
                  <el-table :data="gridData" @cell-click='selectTemp'>
                    <el-table-column width="400" property="address" label="模板" />
                  </el-table>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="肉眼所见：">
                <el-popover placement='bottom' :width="400" trigger="click">
                  <template #reference>
                    <el-input v-model="formData.field2" type="textarea"></el-input>
                  </template>
                  <el-table :data="gridData" @cell-click='selectTemp'>
                    <el-table-column width="400" property="address" label="模板" />
                  </el-table>
                </el-popover>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class='imgArea'>
            <el-descriptions :size='size'>
              <el-descriptions-item label="光镜所见：">
                <p>
                  <img src='http://localhost:5041/image/2024-06-03/BC5180/2024-06-03BC51801000BC5180%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241105115935.png'>
                </p>
              </el-descriptions-item>
            </el-descriptions>
          </el-row>
          <el-row style='text-align: center;'>
            <el-form :model="form" label-width="auto" style="width: calc(100% - 10px)">
              <el-form-item label="病理诊断：">
                <el-popover placement='bottom' :width="400" trigger="click">
                  <template #reference>
                    <el-input v-model="form.date1" type="textarea" ref="input1Ref" @input="handleInput" rows='5' style="width: calc(100% - 10px)" />
                  </template>
                  <el-table :data="gridData" @cell-click='selectTemp'>
                    <el-table-column width="400" property="address" label="模板" />
                  </el-table>
                </el-popover>
              </el-form-item>
              <el-form-item label="免疫组化：">
                <el-popover placement='bottom' :width="410" trigger="click">
                  <template #reference>
                    <el-input v-model="form.date2" type="textarea" rows='3' style="width: calc(100% - 10px)" />
                  </template>
                  <el-table :data="gridData">
                    <el-table-column width="400" property="address" label="模板" />
                  </el-table>
                </el-popover>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-col>

      </el-row>

    </el-main>
    <DiagnosTempDrawer ref="diagnosTempDrawerRef" @sltDiagnosTempInfo="selectDiagnosTempInfo"></DiagnosTempDrawer>

  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType, onMounted } from 'vue';
import { IsEmpty, formatDateTime } from '@/utils/common'; //导入工具函数
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import SelectDataGrid from '@/components/SelectDataGrid.vue';
import { AppStore } from '@/stores/store';
import { FormInstance } from 'element-plus';
import type { ComponentSize } from 'element-plus';
import DiagnosTempDrawer from '@/components/DiagnosTempDrawer.vue';

import type { VxeTablePropTypes } from 'vxe-table';
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();
let orgId = ref(null);
const formRef = ref<FormInstance>; //表单ref标记
const size = ref<ComponentSize>('large');
const tableData = ref<RowVO[]>([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]);

const mergeCells = ref<VxeTablePropTypes.MergeCells>([
  { row: 1, col: 1, rowspan: 3, colspan: 1 },
  { row: 1, col: 3, rowspan: 2, colspan: 1 }
]);
// 表单绑定的数据类型限制
interface FormDataVO {
  id: string /*主键*/;
  layerCode: String /*编号 */;
  layerBarcode: String /*条码号 */;
  supportTemp: String /*支持温度 */;
  currentTemp: String /*当前温度 */;
  boxTypesRange: String /*支持标本盒类型 */;
  layerType: String /*类型 */;
  layerSize: String /*尺寸 */;
  fridgeId: String /*冰箱 */;
  layerSeq: String /*位置排序 */;
  status: Number /*状态 */;
  deptName: String /*所属科室 */;
}
// 表单绑定的数据
let formData = reactive<FormDataVO>({
  id: '',
  layerCode: '' /*编号 */,
  layerBarcode: '' /*条码号 */,
  supportTemp: '' /*支持温度 */,
  currentTemp: '' /*当前温度 */,
  boxTypesRange: '' /*支持标本盒类型 */,
  layerType: '' /*类型 */,
  layerSize: '' /*尺寸 */,
  fridgeId: '' /*冰箱 */,
  layerSeq: '' /*位置排序 */,
  status: 1 /*状态 */,
  deptName: '' /*所属科室 */
});
let types = reactive([]);
let fridgeId = ref('');
// 表单校验规则
const formRules: any = {
  layerCode: [{ required: true, message: '请输入编号' }],
  layerBarcode: [{ required: true, message: '请输入条码号' }]
};

defineExpose({
  addNew,
  saveForm,
  initPage
});

// 父组件传值
let props = defineProps({
  fridgeId: { type: String as PropType<any>, required: true },
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
  },
  {
    deep: true,
    immediate: true
  }
);
watch(
  () => props.fridgeId,
  (nval, oval) => {
    fridgeId.value = nval;
  },
  {
    deep: true,
    immediate: true
  }
);

onMounted(() => {
  orgId = store.userInfo.orgId;
  //formData.bankNumber=generateCode();
});

// 方法定义区 =============

const input1Ref = ref(null);
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '(左侧甲状腺结节穿刺涂片)找到少量滤泡上皮，分化良好，未见恶性证据 ',
  resource: '',
  desc: ''
});
const gridData = [
  {
    address: '无慢性咳嗽、咳痰、咯血、呼吸困难、胸痛史。'
  },
  {
    address: '无心悸、活动后气促、心前区痛、下肢水肿、腹水、头晕、头痛、晕厥，高血压史。'
  },
  {
    address: '无食欲减退、反酸、嗳气、恶心、呕吐、腹胀、腹痛、腹泻、便秘、呕血、黑便、黄疸史'
  },
  {
    address: '无皮肤苍白、头晕、眼花、皮肤出血点、瘀斑、肝脾淋巴结肿大、骨骼疼痛史'
  }
];
const onSubmit = () => {
  console.log('submit!');
};
const selectTemp = (row: any, column: any) => {
  console.log(row);
  const pos = getCaretPosition();
  this.text = this.text.slice(0, pos) + row.address + this.text.slice(pos);
};
const getCaretPosition = () => {
  let caretPos = 0;
  const input = input1Ref;
  if (document.selection) {
    input.focus();
    const sel = document.selection.createRange();
    sel.moveStart('character', -input.value.length);
    caretPos = sel.text.length;
  } else if (input.selectionStart || input.selectionStart === 0) {
    caretPos = input.selectionStart;
  }
  return caretPos;
};

//生成题库编码
function generateCode() {
  let now = new Date();
  console.log(now, 'now');
  let y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate(),
    h = now.getHours(),
    mm = now.getMinutes(),
    s = now.getSeconds(),
    ms = now.getMilliseconds();
  return 'TM' + y + m + d + h + mm + s + ms;
}
function addNew(callback: any) {
  clear();
  if (callback) {
    callback({ a: '初始化完成' });
  }
}
// 清空表单
function clear() {
  //formData.startus = 1;
  //formData.bankNumber = generateCode();
  //formData.seq = 1;
  formData.id = '';
  formData.layerCode = ''; /*编号 */
  formData.layerBarcode = ''; /*条码号 */
  formData.supportTemp = ''; /*支持温度 */
  formData.currentTemp = ''; /*当前温度 */
  formData.boxTypesRange = ''; /*支持标本盒类型 */
  formData.layerType = ''; /*类型 */
  formData.layerSize = ''; /*尺寸 */
  formData.fridgeId = fridgeId.value; /*冰箱 */
  formData.layerSeq = ''; /*位置排序 */
  formData.status = 1; /*状态 */
  formData.deptName = ''; /*所属科室 */
}

// 保存信息
function saveForm() {
  submitForm();
}
function initPage(selsectRow: any) {
  Object.assign(formData, selsectRow);
  fridgeId.value = selsectRow.id;
}
// 保存
const submitForm = () => {
  let elInfo = proxy.$refs.formRef;
  formData.fridgeId = fridgeId.value;
  elInfo.validate(async (valid: any) => {
    if (!valid) {
      return false;
    }
    let res: any;
    if (IsEmpty(formData.id)) {
      res = await samstoFridgeLayerAdd(formData);
    } else {
      res = await samstoFridgeLayerEdit(formData);
    }
    res.status.code === 1 ? VxeMessage(res.status.msg, VxeNotifyType.success) : VxeMessage(res.status.msg, VxeNotifyType.error);
    clear();
    proxy.$emit('findList');
  });
};

let diagnosTempDrawerRef = ref(null);

function showDiagnosTempDrawer() {
  diagnosTempDrawerRef.value.initPage();
}
function selectDiagnosTempInfo(row) {
  console.log('----', row);
}
// function selectRow(e, rowIndex) {
//   if (!IsEmpty(e)) {
//     formData.deptName = e.code;
//   }
// };
// const states = [
//   {
//     value: 1,
//     label: '启用'
//   },
//   {
//     value: 0,
//     label: '停用'
//   }
// ];
</script>

<style lang="scss" scoped>
#imgtxtrpt {
  height: calc(80vh - 10px);
  padding: 21px;
  overflow: auto;
  // 中等尺寸时 配置扩展属性按钮
  .el-button--default {
    padding: 5px 11px;
  }
  table {
    border-collapse: collapse; /* 确保表格边框合并为单一边框 */
  }

  table,
  th,
  td {
    border: 1px solid black; /* 设置表格、表头、单元格的边框 */
    text-align: center;
  }
  .imgArea {
    margin-top: 4px;
    font-size: 14px;
    p {
      text-align: center;
      img {
        width: 50%;
        padding: 5px;
      }
    }
    .textArea {
      min-height: 30px;
    }
  }

  .font14 {
    font-size: 14px;
  }
}
#imgtxtrpt::-webkit-scrollbar {
  display: none;
}
</style>

